<template>
	<div id="app">
		<h3>自定义组件：v-big</h3>
		<div v-text="num"></div>
		<div v-big="num"></div>
		<button @click="num++">click</button>

		<h3>自定义组件：v-demo</h3>
		<div id="hook-arguments-example" v-myDemo:foo.a.b="message"></div>

		<h3>动态参数</h3>
		<div id="dynamicexample">
			<h3>Scroll down inside this section ↓</h3>
			<p v-fix:[direction]="200">I am pinned onto the page at 200px to the left.</p>
		</div>

		<h3>简写形式：只在bind和update触发相同行为</h3>
		<div v-color="color">hello world!!!!!</div>
	</div>
</template>

<script>
	import HomeView from '../src/directives/big.js'

	export default {
		name: 'App',
		components: {
			HomeView
		},
		data() {
			return {
				num: 2,
				message: 'hello',
				direction: 'left',
				color: '#ff6799'
			}
		}
	}
</script>

<style>
	#app {
		font-family: Avenir, Helvetica, Arial, sans-serif;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		text-align: center;
		color: #2c3e50;
		margin-top: 60px;
	}
</style>
